<template>
    <div>
        <h2>房型显示页面</h2>

        <div>
            房型名称：
            <input type="text" v-model="cc.typeName">
            <input type="button" value="查询" class="btn btn-info" @click="cha">
        </div>

        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>房型名称</td>
                    <td>单价</td>
                    <td>室内面积</td>
                    <td>最多入住人数</td>
                    <td>图片</td>
                    <td>房型描述</td>
                    <td>是否有窗</td>
                    <td>
                        操作
                    </td>
                </tr>

                <tr v-for="item in aa.list" :key="item.Id">
                    <td>{{ item.TypeName }}</td>
                    <td style="color: red;">￥{{ item.Price.toFixed(2) }}</td>
                    <td>{{ item.Area }}</td>
                    <td>{{ item.MaxCount }}</td>
                    <td>
                        <img :src="item.Phone" width="100" height="100" alt="">
                    </td>
                    <td>{{ item.Desc }}</td>
                    <td>{{ item.IsWindows == 0 ? "是" : "否" }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)">
                        <input type="button" value="修改" class="btn btn-info" @click="upd(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共 <b>{{ aa.ZongTiao }}</b> 条</span>
        <span>每页 <b>{{ cc.pageSize }}</b> 条</span>
        <span>共 <b>{{ cc.pageIndex }}/{{ aa.ZongYe }}</b> 页</span>
        <select v-model="cc.pageSize" @change="cha">
            <option :value="item" v-for="item in arr" :key="item">{{ item }}</option>
        </select>

        <input type="button" value="首页" class="btn btn-primary" @click="goPage(1)">
        <input type="button" value="下一页" class="btn btn-primary" @click="goPage(cc.pageIndex + 1)">
        <span v-for="item in aa.ZongYe" :key="item" @click="goPage(item)">{{ item }}</span>
        <input type="button" value="上一页" class="btn btn-primary" @click="goPage(cc.pageIndex - 1)">
        <input type="button" value="尾页" class="btn btn-primary" @click="goPage(aa.ZongYe)">
        <input type="number" v-model="cc.pageIndex">
        <input type="button" value="跳转" class="btn btn-primary" @click="goPage(cc.pageIndex)">
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import moment from 'moment';

//---------删除----------
const del = (id: any) => {
    if(confirm('确认删除吗？')){
        axios({
        method: 'delete',
        url: '/api/Week3/DelWeek3Type',
        params: {
            id: id
        }
    })
        .then(res => {
            console.log(res);
            if (res.data > 0) {
                alert('成功');
                getShow();
            }
            else {
                alert('失败')
            }
        })
        .catch(err => {
            console.log(err);
        })
    }
}

//-------------修改跳转--------
const upd=(id:any)=>{
    router.push({
        path:'/htypeUpd',
        query:{
            id:id
        }
    })
}

//分页跳转
const goPage = (num: any) => {
    if (num < 1) {
        cc.pageIndex = 1;
        return;
    }
    if (num > aa.ZongYe) {
        cc.pageIndex = aa.ZongYe;
        return;
    }
    cc.pageIndex = num;
    getShow();
}

//页容量改变
let arr = ref([2, 4, 6, 8]);

//分页查询
const cha = () => {
    cc.pageIndex = 1;
    getShow();
}

//--------显示---------
onMounted(() => {
    getShow();
})

let aa: any = reactive({
    list: [],
    ZongTiao: 0,
    ZongYe: 0
})
let cc: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    typeName: ''
})

const getShow = () => {
    axios({
        method: 'get',
        url: '/api/Week3/ShowWeek3Type',
        params: cc
    })
        .then(res => {
            console.log(res);
            aa.list = res.data.list;
            aa.ZongTiao = res.data.ZongTiao;
            aa.ZongYe = res.data.ZongYe;
        })
        .catch(err => {
            console.log(err);
        })
}


</script>

<style scoped>
b {
    color: blueviolet
}



input[type="button"] {
    margin-right: 10px;
}

span {
    margin-right: 10px;
}
</style>